<template>
  <SettingBox title="功能">
    <SettingBoxItem label="内容" tip="内容">
      <el-input placeholder="请输入链接内容" v-model="config.slot"></el-input>
    </SettingBoxItem>
    <SettingBoxItem label="链接地址" tip="链接地址">
      <el-input placeholder="请输入链接地址" v-model="config.href"></el-input>
    </SettingBoxItem>
    <SettingBoxItem label="是否显示下划线" tip="是否显示下划线">
      <el-switch v-model="config.underline"></el-switch>
    </SettingBoxItem>
    <SettingBoxItem label="是否禁用" tip="是否禁用">
      <el-switch v-model="config.disabled"></el-switch>
    </SettingBoxItem>
    <SettingBoxItem label="链接类型" tip="链接类型">
      <el-select placeholder="请选择链接类型" v-model="config.type">
        <el-option label="主链接" value="primary"></el-option>
        <el-option label="成功链接" value="success"></el-option>
        <el-option label="警告链接" value="warning"></el-option>
        <el-option label="危险链接" value="danger"></el-option>
        <el-option label="信息链接" value="info"></el-option>
      </el-select>
    </SettingBoxItem>
    <SettingBoxItem label="跳转位置" tip="设置跳转位置">
      <el-select placeholder="请选择跳转位置" v-model="config.target">
        <el-option label="在当前窗口打开" value="_self"></el-option>
        <el-option label="在新的窗口打开" value="_blank"></el-option>
      </el-select>
    </SettingBoxItem>
  </SettingBox>
</template>

<script lang="ts" setup>
defineOptions({
  name: "LinkConfig",
});

defineProps({
  config: {
    type: Object,
    required: true,
  },
});
</script>

<style scoped lang="scss"></style>
